<template>
    <div id="red" :style="{height:height+'px'}">
        <cube-scroll ref="scroll" :options="scroll_options" @pulling-up="upLoad">
            <div id="list" v-if="list.data.length > 0">
                <dl v-for="(item,index) in list.data" :key="item.id" @click="clickDl(index)">
                    <dt>
                        <img v-if="item.red_type == 'normal'" src="./images/red.png" @load="$refs.scroll.refresh" />
                        <img v-else :src="item.media" @load="$refs.scroll.refresh" />
                    </dt>
                    <dd>{{item.title}}</dd>
                    <dd>总额:{{getRedSum(item)}} 数量:{{item.already_number}}/{{item.number}}</dd>
                    <dd>
                        <template v-if="item.red_type === 'normal'">普通红包</template>
                        <template v-else-if="item.red_type === 'pic'">图片红包</template>
                        <template v-else>视频红包</template>
                        <span v-if="item.status == '3'" style="color:indianred;"> 已发完</span>
                        <span v-if="item.status == '4'" style="color:red;"> 已停止</span>
                    </dd>
                    <dd>{{item.time}}</dd>
                </dl>
<!--                <dl>-->
<!--                    <router-link class="a" to="/me/red/slide">-->
<!--                        <dt><img src="./images/red.png" /></dt>-->
<!--                        <dd>恭喜发财，大吉大利</dd>-->
<!--                        <dd>总额:100 数量:10/100</dd>-->
<!--                        <dd>普通红包 <span>已发完</span></dd>-->
<!--                        <dd>2010-10-20 10:20</dd>-->
<!--                    </router-link>-->
<!--                </dl>-->
            </div>
            <empty v-else>您还没有发过红包哦</empty>
        </cube-scroll>

        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
    </div>
</template>

<script>
    import empty from '../../../../components/empty/Empty';
    export default {
        name: "red",
        data(){
            return {
                height:0,
                transition_name:"",
                scroll_options:{
                    scrollbar:true,
                    pullUpLoad: {
                        txt:{
                            more:"上拉加载",
                            noMore:"----我也是有底线的----"
                        }
                    }
                },
                index:0,  //操作的列表下标
                list:{
                    data:[],
                    limit:[0,10]
                },
                loading:false  //是否加载中
            }
        },
        components:{
          empty
        },
        beforeRouteUpdate(to, from, next){
            this.transition_name = to.path.split('/').length < from.path.split('/').length ? "animated child-animated slideOutRight delay-2s" : "animated child-animated slideInRight delay-2s";
            setTimeout(()=>{
                next();
            },10);
        },
        created(){
            this.getList();
        },
        mounted() {
            this.height = document.documentElement.clientHeight;
        },
        methods:{
            /**
             * 获取列表
             */
            getList(){
                if(this.loading) return true;
                this.loading = true;
                this.$url('meRed/getList',{
                    limit:this.list.limit
                })
                    .then((res)=>{
                        this.loading = false;
                        if(res.data.status === 'success'){
                            this.list.limit[0] += this.list.limit[1];
                            this.list.data.push(...res.data.data);
                            this.$refs.scroll.forceUpdate(true,true);
                        }else{
                            if(this.list.limit[0] === 0){
                                this.scroll_options.pullUpLoad = false;
                            }else{
                                this.$refs.scroll.forceUpdate(false,false);
                            }
                        }
                    });
            },
            /**
             * 上拉加载
             */
            upLoad(){
                this.getList();
            },
            /**
             * 获取红包余额
             */
            getRedSum(data){
                if(data.type === '1'){
                    return data.money;
                }else{
                    return parseInt(data.number) * parseFloat(data.money).toFixed(2);
                }
            },
            /**
             * 点击列表
             */
            clickDl(index){
                this.index = index;
                let item = this.list.data[index];
                let data = [
                    {
                        content:'查看',
                        value:'detail'
                    }
                ];
                if(item.status == 2){
                    data.push({content:'停止发红包',value:'stop'});
                }else if(item.status == 4){
                    data.push(
                        {content:'开始发红包',value:'start'},
                        {content:'删除',value:'delete'}
                        );
                }else if(item.status == 3){
                    data.push(
                        {content:'删除',value:'delete'}
                    );
                }
                this.$createActionSheet({
                    title: '操作',
                    data,
                    onSelect:(item)=>{
                        if(item.value === 'detail'){
                           this.toRedDetail();
                        }else if(item.value === 'stop'){
                           this.changeStatus(4);
                        }else if(item.value === 'start'){
                            this.changeStatus(2);
                        }else if(item.value === 'delete'){
                            this.$createDialog({
                                type: 'confirm',
                                icon: 'cubeic-alert',
                                title: '提示',
                                content: '确定要删除吗？删除后红包剩余余额会返还到您的微信钱包或者银行卡',
                                onConfirm:()=>{
                                    this.changeStatus(9);
                                }
                            }).show();
                        }
                    }
                }).show();
            },
            /**
             * 红包详情
             */
            toRedDetail(){
                this.$router.push('/me/red/slide/'+this.list.data[this.index].id);
            },
            /**
             * 修改红包状态
             * @param status 修改的红包状态
             */
            changeStatus(status){
                this.$url('meRed/changeStatus',{
                    red_id:this.list.data[this.index].id,
                    status
                })
                    .then((res)=>{
                        if(res.data.status === 'success'){
                            this.$createToast({
                                txt: '操作成功',
                                time: 1500,
                                type:'correct'
                            }).show();
                            if(status == 9){
                                this.list.data.splice(this.index,1);
                            }else{
                                this.list.data[this.index].status = status;
                            }
                        }else{
                            this.$createToast({
                                txt: res.data.err_msg,
                                time: 1500,
                                type:'error'
                            }).show();
                        }
                    });
            }
        }
    }
</script>

<style scoped lang="less" src="./red.less"></style>
